<template>
  <div class="video-container">
    <el-carousel indicator-position="outside" :autoplay="false" height="190px">
      <el-carousel-item v-for="item in videoList" :key="item">
        <div class="video-item" @click="handleClick(item)">
          <div class="video-item-name">
            <span>{{ item.cameraName }}</span>
            <el-tag v-if="item.onlineStatus === '1'" plain round>在&nbsp;&nbsp;线</el-tag>
            <el-tag v-else plain round type="danger">离&nbsp;&nbsp;线</el-tag>
          </div>
          <div class="video-item-img">
            <el-image loading="lazy" class="video-item-img-item"
              :src="`${BASE_API}video/getPlaySnap?cameraUuid=${item.cameraUuid}&customerNo=${item.customerNo}&cameraType=${item.cameraType}`">
              <template #error>
                <el-icon size="32">
                  <VideoPlay />
                </el-icon>
              </template>
            </el-image>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup lang='ts'>
import { ElMessage } from 'element-plus'
import { VideoPlay } from '@element-plus/icons-vue'
import { useDialog } from '@/hooks/useDialog'
import {onMounted, ref} from 'vue'
import VideoDetails from '@/views/DataView/bvideo/videoDetails.vue'
import { getCameraList } from '@/api/bvideo'

const BASE_API = import.meta.env.VITE_APP_BASE_URL

defineProps({
  alarmId: {
    type: String,
    default: ''
  }
})

const videoList = ref([])
onMounted(async () => {
  const {data} = await getCameraList({pageSize: -1})
  videoList.value = data.records
})

const { openDialog } = useDialog()
function handleClick (item: VideoItem) {
  if (item.onlineStatus === '0') {
    ElMessage({
      message: '该摄像头离线，无法查看视频',
      type: 'warning'
    })
    return
  }
  openDialog(item.cameraName, VideoDetails, item)
}
</script>
<style lang="scss" scoped>
.video-container {
  position: relative;
  width: 100%;
}

.video-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  background: var(--bg-color-page);
  padding: 8px;
  gap: 8px;
  cursor: pointer;
  direction: ltr;

  &:last-child {
    margin-bottom: 0;
  }

  .video-item-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 14px;
  }

  .video-item-img {
    width: 100%;
    font-size: 0;

    .video-item-img-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 135px;
      background-color: #000;
      object-fit: cover;
    }
  }
}
</style>
